<template>
<div class="home">
    <el-row :gutter="30">
        <el-col class="mb-2" :xl="4" :lg="8" :md="12" v-for="(item,index) in datalist" :key="index">
            <el-card shadow="never">
                <div class="d-flex jc-between ai-center">
                    <div class="icon d-flex jc-center ai-center" :style="{backgroundColor:item.iconBgColor}">
                        <i :class="item.icon"></i>
                    </div>
                    <div class="flex-1 pl-3 d-flex flex-column jc-between py-2" style="height:60px">
                        <h3 class="fs-xxl">
                            <countTo :endVal='item.number' :duration='3000'></countTo>
                        </h3>
                        <div class="fs-sm">{{item.title}}</div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-divider></el-divider>

    <el-row>
        <el-col :span="24">
            <el-card shadow="never">
                <echarts ref="incomeexpenditure" width="100%" height="300px" echartsId="incomeexpenditure" :options="incomeexpenditureOptions" />
            </el-card>
        </el-col>
    </el-row>

    <el-divider></el-divider>

    <el-row :gutter="30">
        <el-col :span="12">
            <el-card shadow="never">
                <echarts ref="paymentanalysis" width="100%" height="400px" echartsId="paymentanalysis" :options="paymentanalysisOptions" />
            </el-card>
        </el-col>

        <el-col :span="12">
            <el-card shadow="never">
                <el-timeline>
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </el-card>
        </el-col>
    </el-row>

</div>
</template>

<script>
import countTo from 'vue-count-to'
import echarts from '@/components/echarts'
import {
    incomeexpenditureOptions,
    paymentanalysisOptions,
    picker
} from '@/mock/home.js'
export default {
    data() {
        return {

            // 每月收支对比图
            incomeexpenditureOptions: incomeexpenditureOptions,
            incomeexpenditureEcharts: {},
            // 付款分析图
            paymentanalysisOptions: paymentanalysisOptions,
            paymentanalysisEcharts: {},
            datalist: [{
                    title: '活跃用户',
                    number: 32512,
                    iconBgColor: '#FA7D8F',
                    icon: 'el-icon-s-custom'
                },
                {
                    title: '交易金额',
                    number: 51123,
                    iconBgColor: '#A2C5FC',
                    icon: 'el-icon-s-custom'
                },
                {
                    title: '总盈利额',
                    number: 65132,
                    iconBgColor: '#FDB2AF',
                    icon: 'el-icon-s-custom'
                },
                {
                    title: '累计点击',
                    number: 95113,
                    iconBgColor: '#F1BCE8',
                    icon: 'el-icon-s-custom'
                },
                {
                    title: '分享统计',
                    number: 72512,
                    iconBgColor: '#F9B875',
                    icon: 'el-icon-s-custom'
                },
                {
                    title: '新闻互动',
                    number: 61124,
                    iconBgColor: '#8AE5D5',
                    icon: 'el-icon-s-custom'
                },
            ],
            activities: [{
                    content: '新增富文本功能',
                    timestamp: '2020-11-13'
                },
                {
                    content: '新增超级表格功能',
                    timestamp: '2020-10-25'
                },
                {
                    content: '完成按钮以及页面权限校验',
                    timestamp: '2020-09-24'
                },
                {
                    content: '第一次部署到服务器',
                    timestamp: '2020-09-20'
                },
                {
                    content: '新增导出Excel功能',
                    timestamp: '2020-09-19'
                },
                {
                    content: '新增阿里图标库',
                    timestamp: '2020-09-19'
                },
                {
                    content: '优化登录页面',
                    timestamp: '2020-09-18'
                },
                {
                    content: '完善鉴权路由',
                    timestamp: '2020-09-15'
                }, {
                    content: '完善页面路由',
                    timestamp: '2020-09-15'
                }, {
                    content: '完善分页功能',
                    timestamp: '2020-09-10'
                }, {
                    content: '项目创建成功!开启代码世界的大门!!!',
                    timestamp: '2020-09-09'
                }
            ]
        }
    },
    components: {
        countTo,
        echarts
    },
    mounted() {
        this.incomeexpenditureEcharts = this.$refs.incomeexpenditure.init()
        this.paymentanalysisEcharts = this.$refs.paymentanalysis.init()
        // 自适应宽度变化Echarts
        window.addEventListener('resize', () => {
            this.incomeexpenditureEcharts.resize()
            this.paymentanalysisEcharts.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.icon {
    width: 60px;
    height: 60px;
    background-color: #f05050;
    color: #fff;
    border-radius: 8px;

    i {
        font-size: 32px;
    }
}
</style>
